<template>
    <div>
        <h2>{{num}}</h2>
        <h2>{{str}}</h2>
        <h2>{{arr}}</h2>
        <h2>{{false}}</h2>
        <h2>{{data.num}}</h2>
        <h2>{{data.students}}</h2>
        <h2>学生信息</h2>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>ID</td>
                    <td>名字</td>
                    <td>年龄</td>
                </tr>
                <tr v-for="item in students" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
                <tr>
                    <td>

                    </td>
                </tr>
            </tbody>
        </table>

        <h2>出生地</h2>
        <select >
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in Citys" :key="item.id">{{item.name}}</option>
        </select>
        <br>

        <input type="button" value="改变num" class="btn btn-danger" v-on:click="fn">
        <input type="button" value="改变num的" class="btn btn-danger" @click="fn">
        <input type="button" value="改变str的" class="btn btn-danger" @click="fn1">
        <input type="button" value="改变arr的" class="btn btn-danger" @click="fn2">
        <input type="button" value="改变bool的" class="btn btn-danger" @click="fn3">
        <input type="button" value="改变data.num的" class="btn btn-danger" @click="fn4">
        <input type="button" value="改变data.students的" class="btn btn-danger" @click="fn5">
    </div>
</template>

<script setup lang="ts">
//ref的作用：用来实现响应式数据，ref一般用于实现基本类型的响应式数据
//v-on的作用：绑定事件  
    import {ref,reactive} from 'vue'

    let num=ref(100);
    let str=ref("欣欣向荣");
    let arr=ref(["你好","哈哈","再见"]);
    let bool=ref(false);
    let students=ref([
        {id:1,name:"张三",age:20},
        {id:2,name:"李四",age:24},
        {id:3,name:"王五",age:22},
        {id:4,name:"赵六",age:29},
        {id:5,name:"孙七",age:25}

    ])
    let Citys=ref([
        {id:1,name:"北京"},
        {id:2,name:"上海"},
        {id:3,name:"美国"},
        {id:4,name:"澳大利亚"},
        {id:5,name:"俄罗斯"},
    ])

    let data=reactive({
        num:100,
        str:"好好学习",
        arr:["喝酒","烫头"],
        student:{name:'张三',age:20},
        students:[
            {name:'张三',age:20},
            {name:'李四',age:18}
        ]
    })



    const fn=()=>{
        num.value++;
        console.log(num.value);

    }

    const fn1=()=>{
        str.value="灯红酒绿";
    }
    const fn2=()=>{
        arr.value[0]="不好";
        arr.value[1]="娃哈哈";
        arr.value[2]="回见";
    }
    const fn3=()=>{
        bool.value=true;
    }
    const fn4=()=>{
        data.num++
    }
    const fn5=()=>{
        data.students[0].name="啦啦"
    }
</script>

<style scoped>

</style>